<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>预览</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .edit-top-bnts {
            float: right;
        }

        .my_icon {
            margin-right: 4px;
            line-height: 56px;
            padding-left: 6px;
            width: 10px;
            color: #DEE0E1;
            font-size: 20px;
        }

        .done span i {
            color: #FE6500;
        }

        .done span {
            font-weight: bold
        }

        .success span i {
            color: #00CBA6;
        }

        .nav_item {
            font-size: 18px;
            cursor: pointer;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 50px;
            color: #7a8087;
        }

        .img_div {
            background-color: #f8f8f9;
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 10px;
            border: #DEE0E1 solid 1px;
            text-align: center;
            font-size: 16px;
        }

        .img_div:focus {
            border-color: #94b2fa !important;
            box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.2);
        }

        .widget_phases .phase-block {
            background: #fff;
            padding: 14px;
            font-size: 13px;
            line-height: 16px;
            text-align: center;
            width: 90%;
            margin: 0 9px 8px 9px;
        }

        .user-list li {
            height: 80px;
        }
    </style>
</head>
<body>
<!-- body-->
<div class="wrapper" lay-title="详细审核">
    <!-- Main Content -->

    <main id="main-content">

        <div class="main-section">

            <section class="page-section contribute-sec">
                <div class="container">
                    <h2>首页Banner图</h2>
                    <img height="300px" width="1170px" data-th-src="${#strings.concat('/',project.banner)}">
                    <h2>首页广告小图</h2>
                    <img data-th-src="${#strings.concat('/',project.ad)}">
                    <h2>详情页面</h2>
                    <div class="row">
                        <div class="section-fullwidth col-lg-12">
                            <div class="cs-content-holder">
                                <div class="row">
                                    <div class="post-detail">
                                        <div class="main-heading col-lg-12">
                                            <h1></h1>
                                        </div>
                                        <div class="cause-detail">
                                            <div class="col-lg-9">
                                                <figure><img alt=""></figure>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="price-area">
                                                    <span class="price-raised"></span>
                                                    <span class="price-goal"></span>
                                                </div>
                                                <span class="bar"><span style="width:84%;"></span></span>
                                                <span class="fund"></span>
                                                <a
                                                        class="cs-btn"><span>立即购买支持</span></a>
                                                <div class="detail-list">
                                                    <ul>
                                                        <li id="fund_begin"></li>
                                                        <!--                                                            <li><i class="icon-map-marker cscolor"></i><a href="#">Brooklyn, NY, United States</a></li>-->
                                                        <li id="fund_type"><a href="#"></a></li>
                                                        <li id="fund_collection" style="cursor: pointer">
                                                            <div id="toSaveCollection">
                                                                <i class="icon-star"></i>
                                                                <a>点击收藏</a>
                                                            </div>
                                                            <div id="toDeleteCollection" class="hidden">
                                                                <i class="icon-star" style="color: #fe6500 "></i>
                                                                <a>取消收藏</a>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                    <div class="user-info project-team">
                                                        <span>团队成员</span>
                                                        <ul class="user-list">

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="page-section tab-sec">
                <div class="container">
                    <div class="row">
                        <div class="section-fullwidth col-lg-12">
                            <div class="cs-content-holder">
                                <div class="row">
                                    <div class="page-content col-lg-9">
                                        <div class="post-sec">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="detail-tabs">
                                                        <!-- Nav tabs -->
                                                        <ul class="nav nav-tabs" role="tablist">
                                                            <li role="presentation" class="active"><a href="#home"
                                                                                                      aria-controls="home"
                                                                                                      role="tab"
                                                                                                      data-toggle="tab">项目详情</a>
                                                            </li>
                                                            <li role="presentation"><a href="#profile"
                                                                                       aria-controls="profile"
                                                                                       role="tab"
                                                                                       data-toggle="tab">贡献者</a></li>
                                                            <li role="presentation"><a href="#comments" id="toComment"
                                                                                       aria-controls="messages"
                                                                                       role="tab"
                                                                                       data-toggle="tab">评论</a></li>
                                                            <!--                                                                <li role="presentation"><a href="#time-line" aria-controls="settings" role="tab" data-toggle="tab">Time Line</a></li>-->
                                                        </ul>

                                                        <!-- Tab panes -->
                                                        <div class="tab-content">
                                                            <div role="tabpanel" class="tab-pane active" id="home">
                                                                <div style="border: #DEE0E1  solid 1px;"
                                                                     class="post-block summary-sec rich_editor_text">
                                                                </div>
                                                            </div>
                                                            <div role="tabpanel" class="tab-pane" id="profile">
                                                                <div class="post-block contribution-sec">
                                                                    <h2>贡献排行榜</h2>
                                                                    <div class="contributor-list">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div role="tabpanel" class="tab-pane" id="comments">
                                                                <div id="comment">
                                                                    <div class="cs-section-title"><h2></h2>
                                                                    </div>
                                                                    <!-- Ul Start -->
                                                                    <ul>
                                                                        <li id="li-comment-1">
                                                                            <div id="comment-1" class="thumblist">
                                                                                <ul>

                                                                                </ul>
                                                                            </div>
                                                                        </li>
                                                                        <!-- #comment-## -->
                                                                    </ul>
                                                                </div>
                                                                <div class="comment-respond" id="respond">
                                                                    <h2>评论</h2>
                                                                    <div class="comment-form contact-form"
                                                                         id="commentform">
                                                                        <p class="comment-form-comment fullwidt">
                                                                            <label>
                                                                                <i class="icon-comments-o"></i>
                                                                                <textarea id="comment_detail"
                                                                                          placeholder="发表评论"
                                                                                          style="color: #0C0C0C"></textarea>
                                                                            </label>
                                                                        </p>
                                                                        <p class="form-submit">
                                                                            <input type="submit" value="发表"
                                                                                   name="submit"
                                                                                   class="form-style csbg-color"
                                                                                   id="comment_sub">
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <aside class="page-sidebar col-lg-3">
                                        <div class="widget_phases widget">

                                        </div>
                                    </aside>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <!--// Main Content //-->
</div>
<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'layedit'], function () {
        let ctx = [[@{/}]];
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit;

        var project = [[${project}]];
        var creater = [[${creater}]];
        var rewards = [[${rewards}]];
        var needEdit = [[${needEdit}]];
        initWeb();

        $(".layui-layedit-tool").addClass("hidden");

        function initWeb() {
            $(".cause-detail").find("img").attr("src", "/" + project.cover);
            $(".main-heading h1").text(project.title)
            if (project.raiseGoal == null) {
                project.raiseGoal = 0;
            }
            $(".price-raised ").html("已筹  <span>" + project.raiseGoal + "</span>")
            $(".price-goal").html("目标<span>" + project.goal + "</span>")
            var pre = toPercentShow(project.raiseGoal, project.goal);
            $(".bar span").css({"width": pre, "text-align": "center"})
            $(".fund").text(toPercent(project.raiseGoal, project.goal));
            $("#fund_begin").html("<i class='icon-clock7 cscolor'></i>" + timeStamp2String(project.fundBegin))
            $("#fund_type").html("<i class=\"icon-list7 cscolor\"></i>" + [[${type}]]);
            var collectionFlag = [[${collectionFlag}]];
            if (collectionFlag == true) {
                $("#fund_collection #toSaveCollection").addClass("hidden");
                $("#fund_collection #toDeleteCollection").removeClass("hidden");
            } else {
                $("#fund_collection #toSaveCollection").removeClass("hidden");
                $("#fund_collection #toDeleteCollection").addClass("hidden");
            }

            $(".rich_editor_text").html(project.detail);
            for (var i = 0; i < rewards.length; i++) {
                $(".widget").append("        <article class=\"phase-block col-md-12\">\n" +
                    "<input type='text' name='reward_id' class='hidden' value='" + rewards[i].id + "'>" +
                    "                <h5 class=\"cscolor\">" + rewards[i].title + "</h5>\n" +
                    "                <span class=\"price\">" + rewards[i].support + "</span>\n" +
                    "                <p>" + rewards[i].introduce + "</p>\n" +
                    "<p>预计回报发放时间:" + rewards[i].provideYear + "年" + rewards[i].provideMonth + "月</p>" +
                    "                    <button class=\"layui-btn\" lay-submit lay-filter=\"formDemo\"\n" +
                    "                            style=\"background-color: #FE6500; height: 40px\">去支持\n" +
                    "                    </button>" +
                    "                </article>");
            }


        }

        // 团队成员加载
        initTeam();

        function initTeam() {
            $.ajax({
                url: "/web/team/getTeam",
                data: {"projectId": project.projectId},
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        var data = data.data;
                        var str = "";
                        for (var i = 0; i < data.length; i++) {
                            str += "                                                            <li>\n" +
                                "                                                                <figure><img class=\"user-info-avatar\" src='" + data[i].avatar + "' alt=\"\"\n" +
                                "                                                                             draggable=\"false\">\n" +
                                "                                                                </figure>\n" +
                                "                                                                <span class=\"cs-author\">\n" +
                                "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <span>" + data[i].realName + "</span>\n" +
                                "\t\t\t\t\t\t\t\t\t\t\t\t\t\t        </span>\n" +
                                "                                                            </li>"
                        }
                        $(".user-list").html(str)
                    }
                }
            })
        }


        // 计算进度条
        function toPercentShow(num, total) {
            if (Math.round(num / total * 10000) > 10000) {
                return (100 + "%");// 小数点后两位百分比
            }
            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }

        // 计算比例
        function toPercent(num, total) {

            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }

        //格式化日期
        function timeStamp2String(time) {
            var data = time.split("T")
            return data[0];
        }

    })
    ;
    $('.detail-tabs').tab('show');
    $('.tab-pane').addClass('fade in');
</script>
</body>
</html>